<template>
  <div>
    <!-- <el-col :span="12">
  <lineAndBar :height="'30vh'"/>
    </el-col> -->
    <el-col :span="24">
      <title2 :title="title" />
      <Echart
        :options="options"
        :id="'bottomLeftChart' + Math.random()"
        :height="'30rem'"
        width="100%"
      ></Echart>
    </el-col>
  </div>
</template>

<script>
import img from "./img/1@2x.png";
import lineAndBar from "@/components/echart/lineAndBar";
import Echart from "@/common/echart";
export default {
  props: ["type"],
  data() {
    return {
      //dataArray:[],
      chartCateArray: [],
      chartDataArray: [],
      title: "利用率最高top",
      img,
      options: {
        title: {
          text: "World Population",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: [],
        },
        series: [
          {
            name: "CPU",
            type: "bar",
            data: [18203, 23489, 29034, 104970, 131744],
          },
          {
            name: "内存",
            type: "bar",
            data: [19325, 23438, 31000, 121594, 134141],
          },
        ],
      },
    };
  },
  components: { Echart },
  methods: {
    getInfor() {
      if (this.type == "1") {
        this.getInfo({ key: "8-10-1-1" }).then((res) => {
          const dataArray = [];
          res.cockpitData.map((e) => {
            //this.chartCateArray.push(e.dimension)
            dataArray.push(e.measure);

            //this.dataArray.push(e)
          });
          //cpu
          this.options.series[0].data = dataArray;
        });
        this.getInfo({ key: "8-10-1-2" }).then((res) => {
          const dataArray = [];
          res.cockpitData.map((e) => {
            //this.chartCateArray.push(e.dimension)
            dataArray.push(e.measure);

            //this.dataArray.push(e)
          });

          //内存
          this.options.series[1].data = dataArray;
        });
      }
      if (this.type == "2") {
        this.getInfo({ key: "8-10-2-1" }).then((res) => {
          const dataArray = [];
          res.cockpitData.map((e) => {
            //this.chartCateArray.push(e.dimension)
            dataArray.push(e.measure);

            //this.dataArray.push(e)
          });

          //内存
          this.options.series[1].data = dataArray;
        });
        this.getInfo({ key: "8-10-2-2" }).then((res) => {
          const dataArray = [];
          res.cockpitData.map((e) => {
            //this.chartCateArray.push(e.dimension)
            dataArray.push(e.measure);

            //this.dataArray.push(e)
          });

          //内存
          this.options.series[1].data = dataArray;
        });
      }
    },
  },
  mounted() {
    this.getInfor();
    let that = this;
    setTimeout(() => {
      if (that.type == "1") {
        //1为横向 2为纵向
        that.options.xAxis = {
          type: "value",
          boundaryGap: [0, 0.01],
        };
        that.options.yAxis = {
          type: "category",
          data: [
            "大数据安全治理平台",
            "数据交换共享平台",
            "综合信用信息库",
            "统一公共支付平台",
            "甘快办",
          ],
        };
      }
      if (that.type == "2") {
        //1为横向 2为纵向
        that.options.xAxis = {
          type: "category",
          data: [
            "统一电子印章平台",
            "综合法人库存",
            "电子证照管理系统",
            "好差评系统",
            "政务服务平台",
          ],
          axisLabel: {
            interval: 0,
            rotate: -40,
          },
        };
        that.options.yAxis = {
          type: "value",
          boundaryGap: [0, 0.01],
        };
      }
    }, 1000);
  },
};
</script>

<style>
</style>